<script setup>
import SettingTitle from './components/SettingTitle.vue'
import { useTopicMemberQuery, useTopicMemberBlacklistListQuery } from '@/composables/useTopicDataQuery'
import { useRoute } from 'vue-router'
import FansListItem from '@/views/UserHome/components/FansListItem.vue'
import { useTopicDataQuery } from '@/composables/useTopicDataQuery'
const route = useRoute()

const { data, isLoading, isFetching, fetchNextPage, hasNextPage } = useTopicMemberQuery(route.params.topicId)
// todo主题成员分页

const { data: topicDetail } = useTopicDataQuery(route.params.topicId)

const { data: blacklistList } = useTopicMemberBlacklistListQuery(route.params.topicId)
</script>

<template>
  <div>
    <div v-if="blacklistList?.pages[0].result.data.length > 0">
      <SettingTitle title="黑名单" />
      <div class="flex gap-6 flex-wrap">
        <template v-for="(page, index) in blacklistList?.pages" :key="index">
          <FansListItem v-for="item in page.result.data" :key="item.id" :item="item" type="blacklist" />
        </template>
      </div>
    </div>
    <SettingTitle title="管理员" />
    <div class="flex gap-6 flex-wrap">
      <FansListItem v-for="item in topicDetail.result.adminList" :key="item.id" :item="item" type="admin" />
    </div>

    <SettingTitle title="主题成员管理" />
    <div class="flex gap-6 flex-wrap">
      <template v-for="(page, index) in data?.pages" :key="index">
        <FansListItem v-for="item in page.result.data" :key="item.id" :item="item" type="topicUserManage" />
      </template>
    </div>
  </div>
</template>
